<template>
	<view class="password-container">
	  <view class="form-card">
		<!-- 标题 -->
		<text class="form-title">修改密码</text>
  
		<!-- 密码输入项 -->
		<view class="input-group">
		  <text class="input-label">旧密码</text>
		  <input
			class="form-input"
			v-model="ruleForm.jiumima"
			type="password"
			placeholder="请输入旧密码"
			placeholder-class="placeholder-style"
		  />
		</view>
  
		<view class="input-group">
		  <text class="input-label">新密码</text>
		  <input
			class="form-input"
			v-model="ruleForm.xinmima"
			type="password"
			placeholder="请输入新密码"
			placeholder-class="placeholder-style"
		  />
		</view>
  
		<view class="input-group">
		  <text class="input-label">确认密码</text>
		  <input
			class="form-input"
			v-model="ruleForm.querenmima"
			type="password"
			placeholder="请再次输入密码"
			placeholder-class="placeholder-style"
		  />
		</view>
  
		<!-- 提交按钮 -->
		<button class="submit-btn" @tap="tijiaoxuigai">提交修改</button>
	  </view>
	</view>
  </template>
  
  
  <script>
  export default {
	data() {
	  return {
		ruleForm: {
		  jiumima: "",
		  xinmima: "",
		  querenmima: "",
		},
	  };
	},
	async onShow() {
	  let table = uni.getStorageSync("nowTable");
	  let res = await this.$api.session(table);
	  this.user = res.data;
	},
	methods: {
	  async tijiaoxuigai() {
		if (this.user.password != this.ruleForm.jiumima) {
		  this.$utils.msg(`旧密码不能和原始密码一样`);
		  return;
		}
		if (this.user.password == this.ruleForm.xinmima) {
		  this.$utils.msg(`新密码不能和旧密码一样`);
		  return;
		}
		if (this.ruleForm.xinmima != this.ruleForm.querenmima) {
		  this.$utils.msg(`新密码和确认密码不一致`);
		  return;
		}
		this.user.password = this.ruleForm.querenmima;
		await this.$api.update(`yonghu`, this.user);
  
		uni.setStorageSync("pingluenStateState", true);
		this.$utils.msgBack("密码修改成功,下次登录时生效");
	  },
	},
  };
  </script>
  
  <style lang="scss">
  /* 颜色变量 */
  :root {
	--primary-color: #00a67c; // 主色调（医疗绿）
	--secondary-color: #4a90e2; // 辅助蓝
	--text-dark: #2d3436; // 深色文字
	--text-light: #636e72; // 浅色文字
	--border-color: #dfe6e9; // 边框色
  }
  
  .password-container {
	background: #f5f7fa;
	min-height: 100vh;
	padding: 60rpx 40rpx;
	display: flex;
	justify-content: center;
  }
  
  .form-card {
	background: #fff;
	border-radius: 24rpx;
	padding: 50rpx 40rpx;
	width: 100%;
	max-width: 600rpx;
	box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.08);
  }
  
  .form-title {
	display: block;
	font-size: 40rpx;
	color: var(--text-dark);
	font-weight: 600;
	text-align: center;
	margin-bottom: 50rpx;
  }
  
  .input-group {
	margin-bottom: 40rpx;
  }
  
  .input-label {
	display: block;
	font-size: 30rpx;
	color: var(--text-dark);
	margin-bottom: 20rpx;
	font-weight: 500;
  }
  
  .form-input {
	height: 90rpx;
	padding: 0 30rpx;
	background: #f8f9fa;
	border-radius: 12rpx;
	font-size: 28rpx;
	color: var(--text-dark);
	border: 2rpx solid var(--border-color);
	transition: all 0.3s ease;
  
	&:focus {
	  border-color: var(--primary-color);
	  box-shadow: 0 4rpx 12rpx rgba(0, 166, 124, 0.15);
	}
  }
  
  .placeholder-style {
	color: #b2bec3;
	font-size: 28rpx;
  }
  
  .submit-btn {
	background: linear-gradient(135deg, var(--primary-color), #00c853);
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	width: 100%; // 新增宽度设置
	display: block; // 新增显示方式
	border-radius: 12rpx;
	font-size: 32rpx;
	font-weight: 500;
	margin-top: 40rpx;
	transition: all 0.3s ease;
  
	&:active {
	  opacity: 0.9;
	  transform: scale(0.98);
	}
  
	&::after {
	  border: none;
	}
  }
  .submit-btn {
  border: 2rpx solid red !important; /* 调试用边框 */
  background: #ff0000 !important; /* 调试用纯色背景 */
}
  </style>
  